<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Layout </title>
    <script src="http://code.jquery.com/jquery-2.2.4.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
    <link rel="stylesheet" href="/stylesheets/layout-default-latest.css"/>
    <style type="text/css">

         /* Sticky footer styles
            -------------------------------------------------- */

        html,
        body {
            height: 100%;
            width:		100%;
            padding:	0;
            margin:		0;
            overflow:	auto; /* when page gets too small */
            /* The html and body elements cannot have any padding or margin. */
        }

        /* Lastly, apply responsive CSS fixes as necessary */
        @media (max-width: 767px) {
            #footer {
                margin-left: -20px;
                margin-right: -20px;
                padding-left: 20px;
                padding-right: 20px;
            }
        }
        .pane {
            display:	none; /* will appear when layout inits */
        }

        #container {
            background:	#999;
            height:		800px;
            margin:		0 auto;
            width:		100%;
            max-width:	1280px;
            min-width:	700px;
            _width:		700px; /* min-width for IE6 */
        }



    </style>
</head>
<body>
<div class="pane ui-layout-center" style="background: #5f9ea0">Centre</div>
<div class="pane ui-layout-north" style="background: #b22222">North</div>
<div class="pane ui-layout-south" style="background: #f0f8ff">South</div>
<div class="pane ui-layout-east">East</div>
<div class="pane ui-layout-west">
<div class="editor" id="editor" style="width:100%;height:100%;">function a(b,c){
    var toto="toto";
}
</div>
</div>

<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

<script>
var editor;
function setupEditor() {
    editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
    editor.getSession().on('change', function(e) {
        //xx clearTimeout(delay);
        //xx delay = setTimeout(updatePreview, 2000);
        // e.type, etc
    });
    //xx setTimeout(updatePreview, 2000);
}

function updatePreview()
{

}
$(document).ready(function () {
    // $('#container').layout({ applyDemoStyles: true });
    var myLayout = $('body').layout(
            {
                west__onresize:    function() { editor.resize(); },
                center__onresize:  function() {
                    // resize webgl view
                }
            }
    );
    myLayout.sizePane("west", 400);

    setupEditor();
});




</script>
</body>
</html>

